<template>
  <div class="h-full pb-60 m-relative">
    <div class="p-20 h-full overflow-y-auto">
      <GiTable
        row-key="id"
        id="gigPaymentStaff1001"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :row-selection="{ type: 'checkbox', showCheckedAll: true }"
        v-model:selectedKeys="selectedKeys"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        @refresh="getTableData"
      >
        <template #custom-extra>
          <a-form :model="listParams" size="small" class="form w-full flex flex-wrap my-10">
            <a-form-item hide-label class="w-42n mr-10">
              <a-select
                class="w-42n"
                v-model="listParams.typeId"
                placeholder="选择用户类型检索"
                @change="changeCurrent(1)"
              >
                <a-option value="" label="全部"></a-option>
                <a-option v-for="item in cateList" :key="item.id" :value="item.id" :label="item.type"></a-option>
              </a-select>
            </a-form-item>
            <a-form-item hide-label class="w-50n mr-10">
              <a-input
                v-model="listParams.keyword1"
                placeholder="输入用户姓名/手机号检索"
                @pressEnter="changeCurrent(1)"
              >
              </a-input>
            </a-form-item>
            <a-form-item hide-label class="w-80n mr-10">
              <a-input
                v-model="listParams.keyword2"
                placeholder="输入用户身份证号/支付宝账号/银行卡号检索"
                @pressEnter="changeCurrent(1)"
              >
              </a-input>
            </a-form-item>
            <a-form-item hide-label class="w-fit">
              <a-button type="primary" size="small" @click="changeCurrent(1)">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button class="ml-m" size="small" @click="onResetSearch">
                <template #icon>
                  <icon-sync />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-form-item>
          </a-form>
        </template>
        <template #zfb="{ record }">
          <div class="flex-col">
            <span>{{ record.name }}</span>
            <span>{{ record.alipayNo }}</span>
          </div>
        </template>
        <template #yhk="{ record }">
          <div class="flex-col">
            <span>{{ record.name }}</span>
            <span>{{ record.bankName }} {{ record.bankCard }}</span>
          </div>
        </template>
      </GiTable>
    </div>
    <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-c">
      <a-space>
        <a-button @click="props.onClose(0)">取消</a-button>
        <a-button type="primary" :loading="loading" @click="onOk">确定</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { lgUserList, lgCateListSelect } from '@/apis'
import { deepClone, deleteEmpty } from '@/utils/common'

const props = defineProps(['params', 'onClose'])

const columns = ref([
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 120
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    width: 180
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    width: 120
  },
  {
    title: '支付宝信息',
    slotName: 'zfb',
    width: 150
  },
  {
    title: '银行卡信息',
    slotName: 'yhk',
    width: 150
  }
])

const loading = ref(false)
const tableData = ref([])
const cateList = ref([])
const total = ref(0)
const selectedKeys = ref([])
const selectedItems = ref([])
const listParams = reactive({
  page: 1,
  pageSize: 10,
  typeId: undefined,
  keyword1: undefined,
  keyword2: undefined,
  notInIds: []
})
const allList = ref([])
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 数组去重
const uniqueByField = (arr, key) => {
  const seen = new Set()
  return arr.filter((item) => {
    if (seen.has(item[key])) {
      return false
    } else {
      seen.add(item[key])
      return true
    }
  })
}

// 拿出已选择的项
const filterByIds = (keys, objArr) => {
  const keySet = new Set(keys) // 使用 Set 提高查找效率
  return objArr.filter((item) => keySet.has(item.id)) // 筛选出 id 在 keys 数组中的对象
}

// 获取分类
const getCateList = async () => {
  const res = await lgCateListSelect({})
  cateList.value = res.data.list
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    listParams.notInIds = props.params.keys
    const param = deepClone(listParams)
    const res = await lgUserList(deleteEmpty(param))
    tableData.value = res.data.list.map((item) => {
      return {
        ...item,
        disabled: (props.params.payType == 1 && !item.alipayNo) || (props.params.payType == 2 && !item.bankCard)
      }
    })
    allList.value = uniqueByField(allList.value.concat(tableData.value), 'id')
    total.value = res?.data?.pagination?.total || 0
    setTotal(total.value)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getCateList()
  getTableData()
})

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.typeId = listParams.keyword1 = listParams.keyword2 = undefined
  changeCurrent(1)
}

watch(
  () => selectedKeys.value,
  (e) => {
    selectedItems.value = filterByIds(e, allList.value)
  },
  {
    deep: true,
    immediate: true
  }
)

// 点击确认添加/编辑
const onOk = async () => {
  try {
    props.onClose(1, JSON.parse(JSON.stringify(selectedItems.value)))
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: 100%;
  line-height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.textd43030 {
  color: #d43030;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
